<template>
  <div>
    <Group>
      <x-input title="成语" v-model="title" autofocus="autofocus"></x-input>
      <x-textarea title="释义" v-model="expalianation"></x-textarea>
      <x-textarea title="例句" v-model="example"></x-textarea>
      <cell title="颜色">
        <color-picker
          :colors="colors"
          v-model="color"
          size="small"
        ></color-picker>
      </cell>
    </Group>
    <div class="content">
      <div class="box" :style="{ borderColor: color }">
        <div class="title pinyin">
          <div v-for="(item, i) in titlePinyin" v-bind:key="i">
            {{ item }}
          </div>
        </div>
        <div class="title">
          <div v-for="(item, i) in title" v-bind:key="i">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="desc" v-if="expalianation">
        <div class="desc-title" :style="{ backgroundColor: color }">释义</div>
        <div class="desc-content">{{ expalianation }}</div>
      </div>
      <div class="desc" v-if="example">
        <div class="desc-title" :style="{ backgroundColor: color }">例句</div>
        <div class="desc-content">
          {{ example }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Group, XInput, XTextarea, ColorPicker, Cell } from "vux";
import pinyin from "pinyin";

export default {
  components: {
    Group,
    XInput,
    XTextarea,
    ColorPicker,
    Cell,
  },
  data() {
    return {
      title: "韭零后",
      titlePinyin: pinyin("韭零后").map((i) => i[0]),
      expalianation: "网络用语，泛指1990年以后出生的，购买基金后暴跌的一群人。",
      example: "韭零后小李同学最近想打五份工。",
      color: "skyblue",
      colors: [
        "gold",
        "skyblue",
        "silver",
        "#1AAD19",
        "#FF3B3B",
        "#FFEF7D",
        "#8AEEB1",
        "#8B8AEE",
        "#CC68F8",
        "#F18C09",
      ],
    };
  },
  watch: {
    title(newValue) {
      const res = pinyin(newValue);
      this.titlePinyin = res.map((i) => i[0]);
    },
  },
};
</script>

<style>
.content {
  width: 100%;
  margin-top: 20px;
  background-color: #fff;
  padding: 30px 0;
}
.box {
  width: 300px;
  height: 100px;
  border: 3px solid rgb(245, 181, 6);
  margin: 0 auto;
  font-size: 30px;
  font-weight: bold;
}
.title.pinyin{
  font-family: 'Courier New', Courier, monospace;
}
.title {
  width: 275px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.desc {
  width: 300px;
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  font-size: 16px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: bold;
}
.desc-title {
  width: 40px;
  height: 22px;
  line-height: 22px;
  background-color: rgb(245, 181, 6);
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}
.desc-content {
  flex: 1;
  line-height: 22px;
  margin-left: 10px;
}
</style>
